<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <link rel="shortcut icon" href="../images/favicon.ico">
    <link rel="apple-touch-icon-precomposed" href="../images/apple-touch-icon.png">
	<title>form-serialize</title>
	<link rel="stylesheet" href="../../dist/seedsui.min.css">
    <style>
    .group{
        padding: 0 12px;
    }
    .icon.active{
        color: #20aeff;
    }
    </style>
</head>

<body ontouchstart="">
	<header>
	    <div class="titlebar">
	        <a class="titlebar-button" href="javascript:back()"><span>返回</span></a>
	        <h1 class="titlebar-title text-center">表单序列化</h1>
	        <a class="titlebar-button SID-BtnSubmit"><span>完成</span></a>
	    </div>
	</header>
	<article>
	<form id="ID-Form">
            <div class="group">
                <div class="inputbox underline">
                    <label class="inputbox-left">用户名</label>
                    <div class="inputbox-right inputbox" data-input="clear">
                        <input type="text" class="input-text" placeholder="用户名" name="username"/>
                        <i class="icon icon-rdoclose-fill color-placeholder" style="font-size: 20px;line-height: 24px;text-align: center;display: none;"></i>
                    </div>
                </div>
                <div class="inputbox underline">
                    <label class="inputbox-left">密码</label>
                    <div class="inputbox-right inputbox" data-input="reveal">
                        <input type="password" class="input-text" placeholder="密码" name="password"/>
                        <i class="icon icon-eye-fill color-placeholder"></i>
                    </div>
                </div>
                <div class="inputbox underline">
                    <label class="inputbox-left">确认</label>
                    <div class="inputbox-right inputbox" data-input="reveal">
                        <input type="password" class="input-text" placeholder="确认" name="reconfirm"/>
                        <i class="icon icon-eye-fill color-placeholder"></i>
                    </div>
                </div>
            </div>
            <div class="group">
                <div class="inputbox underline">
                    <label class="inputbox-left">昵称</label>
                    <div class="inputbox-right inputbox">
                        <input type="text" class="input-text" placeholder="填写昵称" name="nickname"/>
                    </div>
                </div>
                <div class="inputbox underline">
                    <label class="inputbox-left">性别</label>
                    <div class="inputbox">
                        <div class="input-text">
                            <label>
                                <input type="radio" class="input-radio"  value="male" name="sex" checked/>
                                <span>男</span>
                            </label>
                            <label style="margin-left:8px;">
                                <input type="radio" class="input-radio"  value="female" name="sex"/>
                                <span>女</span>
                            </label>
                        </div>
                    </div>
                </div>
                <div class="inputbox underline">
                    <label class="inputbox-left">出生日期</label>
                    <div class="inputbox-right inputbox">
                        <input type="date" class="input-text" name="birthday" placeholder="出生日期"/>
                    </div>
                </div>
            </div>
            <div class="group">
                <div class="inputbox underline">
                    <label class="inputbox-left">职业</label>
                    <div class="inputbox-right inputbox">
                        <input type="text" class="input-text" name="job" class="job" readonly="" placeholder="选择职业，找到同行"/>
                        <i class="icon icon-arrowright color-placeholder"></i>
                    </div>
                </div>
                <div class="inputbox underline">
                    <label class="inputbox-left">公司</label>
                    <div class="inputbox-right inputbox">
                        <input type="text" class="input-text" name="company" class="company" placeholder="公司"/>
                    </div>
                </div>
                <div class="inputbox underline">
                    <label class="inputbox-left">学校</label>
                    <div class="inputbox-right inputbox">
                        <input type="text" class="input-text" name="school" class="school" placeholder="填写学校，发现校友"/>
                    </div>
                </div>
                <div class="inputbox underline">
                    <label class="inputbox-left">所在地</label>
                    <div class="inputbox-right inputbox">
                        <input type="text" class="input-text" name="live" readonly="" placeholder="选择所在地"/>
                        <i class="icon icon-arrowright color-placeholder"></i>
                    </div>
                </div>
                <div class="inputbox underline">
                    <label class="inputbox-left">故乡</label>
                    <div class="inputbox-right inputbox">
                        <input type="text" class="input-text" name="hometown" readonly="" placeholder="选择所在地"/>
                        <i class="icon icon-arrowright color-placeholder"></i>
                    </div>
                </div>
                <div class="inputbox">
                    <label class="inputbox-left">邮箱</label>
                    <div class="inputbox-right inputbox">
                        <input type="text" class="input-text" name="email" placeholder="填写邮箱"/>
                    </div>
                </div>
            </div>
            <div class="group">
                <div class="inputbox box-top">
                    <label class="inputbox-left" style="padding-top: 10px;">个人说明</label>
                    <div class="inputbox-right inputbox">
                        <textarea class="label-right input-textarea" name="personal" placeholder="请输入个人说明"></textarea>
                    </div>
                </div>
            </div>

            <div class="group">
                <div class="inputbox">
                    <label class="inputbox-left">资料好友可见</label>
                    <div class="inputbox-right input-text" style="line-height: 0">
                        <div class="switch" data-on="是" data-off="否" data-on-value="1" data-off-value="0" data-name="vis"><div class="switch-handle"></div></div>
                    </div>
                </div>
            </div>
        </form>
	</article>
	
    <script src="../../dist/seedsui.min.js"></script>
    <!--Exmobi能力-->
    <!--<script src="../scripts/lib/exmobi/exmobi.js"></script>-->
	<script>
        var view={
            /*=========================
              Model
              ===========================*/
            render:function(){
                var self = this;
                //渲染页面
                this.btnSubmit=document.querySelector(".SID-BtnSubmit");
                this.formControls=new FormControls();
                
                this.alert=new Alert();

                //加载数据
                this.loadData();
            },
            refresh:function(){
                console.log("刷新");
            },
            destroy:function(){
                console.log("移除");
            },
            loadData:function(){

                this._attach();//使用backbone时，此行无用
            },

            /*=========================
              Method
              ===========================*/
            _method:function(){
            },
            
            /*=========================
              Events
              ===========================*/
            _attach:function(e){
                var self=this;
                this.btnSubmit.addEventListener("click",function(){
                    self._onClickBtnSubmit(e);
                },false);
            },

            /*=========================
              Event Handler
              ===========================*/
            _onClickBtnSubmit:function(e){
                this.form=new Form("#ID-Form");
                var args=this.form.serializeJson();
                this.alert.setHTML(JSON.stringify(args));
                this.alert.show();
            },
        }

        window.addEventListener("load",function(){
            view.render();
        }, false);

    	//定义exmobi返回
    	function back(){history.go(-1);}
	</script>
</body>
</html>
